<template>
    <div>
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" shape="round" @search="onSearch">
            <template #action>
                <div @click="onClickButton"></div>
            </template>
        </van-search>
    </div>
    <!-- 热门搜索 -->
    <div class="hotSearch">
        <van-cell>
            <van-icon name="hot-sale" color="red" /> 热门搜索
        </van-cell>
        <van-space :size="12" wrap>
            <van-button type="primary" block v-for="(item, index) in categoryList" :key="item.id" @click="onDetail(item.id)">
                <van-icon name="fire" color="red" /> {{ item.text }}
            </van-button>
        </van-space>
    </div>
    <!-- 搜索结果 -->
    <div class="m-list">
        <div class="m-box" v-for="(item, index) in searchList" :key="item.id" @click="onDetail(item.id)">
            <img :src="item.picture" alt="logo" />
            <div class="m-right">
                <p>￥{{ item.price }}</p>
                <p>{{ item.product }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useSearch } from "@/hooks/search";
import { useCategory } from "@/hooks/category";
import { useRouter } from 'vue-router'

const router = useRouter()
const { onClickLeft, searchValue, onSearch, onClickButton, searchList } = useSearch()
const { categoryList }= useCategory()

const onDetail = (id: number) => {
		router.push({ path: '/detail/' + id })

		// router.push({ path: '/categorydetail/' + id })

	}
</script>

<style lang="scss" scoped>
.hotSearch {
    margin: 0 12px;

    .van-cell {
        font-size: 18px;
        margin-bottom: 6px;
    }

    button {
        color: #000;
        background-color: rgb(249, 246, 240);
        border: 1px solid transparent;
        font-size: 14px;
    }
}

.m-list {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    .m-box {
        width: 47%;
        background-color: rgb(247, 248, 250);
        margin: 6px 0;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        border: 1px solid #ddd;

        img {
            width: 95%;

            // height: 95%;

            border-radius: 20px;
            margin: 6px auto;
            margin-bottom: 20px;
        }

        .m-right {
            color: #333;

            p:first-child {
                font-size: 24px;
                color: #ff1314;
                font-weight: bold;
            }
        }
    }
}
</style>